import React, {lazy, Suspense} from 'react';
import {Navigate, Route, Routes} from 'react-router-dom';
import Layout from './components/layout';

// 懒加载组件
const Home = lazy(() => import('./pages/Home'));
const Projects = lazy(() => import('./pages/Projects'));
const ProjectDetail = lazy(() => import('./pages/Projects/ProjectDetail'));
const CleanupTools = lazy(() => import('./pages/CleanupTools'));
const NodeModulesCleaner = lazy(() => import('./pages/CleanupTools/NodeModulesCleaner'));

// 加载状态
const Loading = () => <div className="page-loading">加载中...</div>;

const AppRoutes: React.FC = () => {
  return (
    <Layout>
      <Suspense fallback={<Loading/>}>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/projects" element={<Projects/>}/>
          <Route path="/projects/:projectPath" element={<ProjectDetail/>}/>
          <Route path="/cleanup" element={<CleanupTools/>}/>
          <Route path="/cleanup/node-modules" element={<NodeModulesCleaner/>}/>
          <Route path="*" element={<Navigate to="/" replace/>}/>
        </Routes>
      </Suspense>
    </Layout>
  );
};

export default AppRoutes;
